<template>
  <div class="goodsort">
    <div class="head">
      <h3>商品分类</h3>
      <p>
        <el-button type="primary" @click="open()">添加分类</el-button>
      </p>
    </div>
    <div>
      <el-table :data="goodtypelist" style="width: 100%">
        <el-table-column label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column label="分类名称">
          <template slot-scope="data">
            <span v-show="!data.row.showinput"> {{ data.row.cateName }}</span>
            <el-input v-show="data.row.showinput" v-model="data.row.cateName" />
          </template>
        </el-table-column>

        <el-table-column label="是否启用">
          <template slot-scope="obj">
            <!-- <span>{{ obj }}</span> -->
            <el-switch
              :disabled="obj.row.showinput == false"
              v-model="obj.row.state"
              active-color="#00BCD4"
              inactive-color="#607D8B"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-if="!scope.row.showinput"
              @click="clickEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="success"
              v-else
              @click="clickFinish(scope.row)"
              >完成</el-button
            >
            <el-button size="mini" type="danger" @click="clickRemove(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="添加分类" :visible.sync="dialog" width="30%" center>
        <div class="marks">
          <div>分类名称</div>
          <div><el-input v-model="cateName" /></div>
        </div>
        <div class="marks">
          <div></div>
          <div>
            <el-switch
              v-model="state"
              active-color="#00BCD4"
              inactive-color="#607D8B"
            />
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog = false">取 消</el-button>
          <el-button type="primary" @click="confirmadd">确 定</el-button>
        </span>
      </el-dialog>

      <div style="margin-top: 20px">
        <el-pagination
          background
          @size-change="sizeChange"
          @current-change="pageChange"
          :current-page.sync="currentPage"
          :page-sizes="pagearr"
          :page-size="pagecount"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { $_catelist, $_changecate, $_catedel, $_addcate } from "@/apis/goods";

export default {
  created() {
    this.reptable();
  },
  data() {
    return {
      currentPage: 1,
      pagecount: 5,
      goodtypelist: [],
      total: 0,
      dialog: false,
      add: [],
      title: "",
      cateName: "",
      state: true,

      pagearr: [5, 10, 15, 20],
    };
  },
  methods: {
    reptable() {
      $_catelist({
        currentPage: this.currentPage,
        pageSize: this.pagecount,
      }).then((res) => {
        for (let obj of res.data.data) {
          obj.state = obj.state == 1;
          obj.showinput = false;
        }
        this.goodtypelist = res.data.data;
        this.total = res.data.total;
      });
    },
    sizeChange(val) {
      this.pagecount = val;
      this.reptable();
    },
    pageChange(newpage) {
      this.currentPage = newpage;
      this.reptable();
    },
    clickEdit(row) {
      row.showinput = true;
    },
    clickFinish(row) {
      row.showinput = false;
      $_changecate({
        id: row.id,
        cateName: row.cateName,
        state: row.state,
      }).then((res) => {
        console.log(res, "修改成功!!!");
      });
    },

    confirmadd() {
      $_addcate({
        cateName: this.cateName,
        state: this.state,
      }).then((res) => {
        this.$message({
          message: res.data.msg,
          type: "success",
        });
      });
      this.dialog = false;
    },
    open() {
      this.dialog = true;
    },
    clickRemove(row) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "危险操作慎重选择", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        $_catedel({ id: row.id }).then((res) => {
          if (res.data.code == 0) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.reptable();
          }
        });
      });
    },
  },
};
</script>

<style lang='less' scoped>
.goodsort {
  width: 98%;
  height: 100%;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 0 20px #212121;
  .head {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #bdbdbd;
  }
  .marks {
    display: flex;
    align-items: center;

    margin-top: 20px;
  }
}
</style>